<template>
  <div class="subject-management">
    <Load v-if="load" />

    <div class="main" v-else>
      <el-form inline>
        <el-form-item label="题目名称：">
          <el-input
            placeholder="请输入题目名称"
            v-model="formData.subjectName"
          ></el-input>
        </el-form-item>
        <el-form-item label="题目难度：">
          <el-select
            v-model="formData.subjectDifficult"
            placeholder="请选择题目难度"
          >
            <el-option label="初级" value="1"></el-option>
            <el-option label="中级" value="2"></el-option>
            <el-option label="高级" value="3"></el-option>
            <el-option label="资级" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目类型：">
          <el-select
            v-model="formData.subjectType"
            placeholder="请选择题目类型"
          >
            <el-option label="单选题" value="1"></el-option>
            <el-option label="多选题" value="2"></el-option>
            <el-option label="判断题" value="3"></el-option>
            <el-option label="简答题" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="search" type="primary" @click="query"
            >查询</el-button
          >
          <el-button icon="refresh" type="warning" @click="clear"
            >重置</el-button
          >
          <el-button icon="plus" type="success" @click="toUploadSubject"
            >录题</el-button
          >
        </el-form-item>
      </el-form>

      <el-table :data="subjectData">
        <el-table-column
          type="selection"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column prop="id" label="主键" width="60" />
        <el-table-column prop="subjectName" label="题目名称" align="center" />
        <el-table-column
          label="题目类型"
          align="center"
          prop="subjectType"
          width="120"
        >
          <template #default="scope">
            <el-tag
              v-if="scope.row.subjectType == 1"
              size="small"
              type="warning"
              >单选题</el-tag
            >
            <el-tag
              v-if="scope.row.subjectType == 2"
              size="small"
              type="success"
              >多选题</el-tag
            >
            <el-tag v-if="scope.row.subjectType == 3" size="small" type="info"
              >判断题</el-tag
            >
            <el-tag
              v-if="scope.row.subjectType == 4"
              size="small"
              type="primary"
              >简答题</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="题目标签" align="center" prop="labelName">
          <template #default="scope">
            <el-tag
              size="small"
              v-for="(item, index) in scope.row.labelName"
              :key="index"
              style="margin-right: 5px"
            >
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="subjectDifficult" label="题目难度" width="120">
          <template #default="scope">
            <el-tag
              v-if="scope.row.subjectDifficult == 1"
              effect="dark"
              size="small"
              >初级</el-tag
            >
            <el-tag
              v-if="scope.row.subjectDifficult == 2"
              effect="dark"
              type="success"
              size="small"
              >中级</el-tag
            >
            <el-tag
              v-if="scope.row.subjectDifficult == 3"
              effect="dark"
              color="#626aef"
              size="small"
              >高级</el-tag
            >
            <el-tag
              v-if="scope.row.subjectDifficult == 4"
              effect="dark"
              type="warning"
              size="small"
              >资深</el-tag
            >
            <el-tag
              v-if="scope.row.subjectDifficult == 4"
              effect="dark"
              type="error"
              size="small"
              >专家</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          label="题目状态"
          align="center"
          width="120"
          prop="isDeleted"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.isDeleted"
              inline-prompt
              active-text="启用"
              inactive-text="禁用"
              @change="handleisDelete(scope.row.id, scope.row.isDeleted)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="240">
          <template #default="scope">
            <el-button
              size="small"
              type="text"
              icon="edit"
              @click="edit(scope.row, scope.row.id)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="text"
              icon="view"
              @click="toDetail(scope.row.id)"
              v-if="scope.row.subjectType == 4"
              >详情</el-button
            >
            <el-button
              size="small"
              type="text"
              icon="delete"
              @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div
        class="pagination"
        style="display: flex; justify-content: center; margin-top: 10px"
      >
        <el-pagination
          v-model:current-page="pageInfo.page"
          v-model:page-size="pageInfo.pageSize"
          :page-sizes="[3, 5, 10]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  updateSubjectStatus,
  reqSubjectByMySelf,
} from "@/api/subject/subject.js";
import { ElMessage } from "element-plus";
import { ref } from "vue";
import permissionCheck from "@/utils/permissionCheck";
import { useRouter } from "vue-router";
import Load from "@/components/Load.vue";

// 加载动画
const load = ref(true);

const $router = useRouter();

// 用于查询题目的实体
let formData = ref({
  subjectName: "", // 题目名称
  subjectDifficult: "", // 题目难度
  subjectType: "", // 题目类型
});

let pageInfo = ref({
  page: 1,
  pageSize: 10,
});

let total = ref(0);

// 用户存储题目数据
let subjectData = ref([]);

// 初始化获取数据
const init = () => {
  reqSubjectByMySelf(pageInfo.value).then((res) => {
    if (res.code == 200) {
      // // 后端返回的题目状态0是 启用，前端组件0是false，所有这里需要做一下转换
      res.data.result.forEach((item) => {
        item.isDeleted ? (item.isDeleted = false) : (item.isDeleted = true);
      });
      subjectData.value = res.data.result;
      total.value = res.data.total;
      load.value = false;
    }
  });
};

// 删除单条题目
const del = (subjectId) => {
  ElMessage.info("功能开发中");
};

// 查看题目详情
const toDetail = (subjectId) => {
  window.open("/#/subjectDetail?id=" + subjectId);
};

// 编辑题目信息
const edit = (row, subjectId) => {
  if (row.isDeleted) {
    ElMessage.warning("请在禁用状态下编辑信息");
    return;
  }
  $router.push({
    query: {
      id: subjectId,
      type: row.subjectType,
      page: pageInfo.value.page,
      pageSize: pageInfo.value.pageSize,
    },
    path: "/upload-subject",
  });
};

// 处理题目状态的切换 0 启用 1 禁用
const handleisDelete = (subjectId, isDeleted) => {
  const subjectInfo = {
    id: subjectId,
    isDeleted: null,
  };
  if (isDeleted) {
    // 启用
    subjectInfo.isDeleted = 0;
  } else {
    // 禁用
    subjectInfo.isDeleted = 1;
  }
  updateSubjectStatus(subjectInfo).then((res) => {
    if (res.code == 200) {
      ElMessage.success("操作成功");
    } else {
      ElMessage.error("操作失败");
    }
  });
};

// 模糊搜索
const query = () => {
  reqSubjectByMySelf(formData.value).then((res) => {
    if (res.code == 200) {
      // 后端返回的题目状态0是 启用，前端组件0是false，所有这里需要做一下转换
      res.data.result.forEach((item) => {
        item.isDeleted ? (item.isDeleted = false) : (item.isDeleted = true);
      });
      subjectData.value = res.data.result;
      total.value = res.data.total;
    } else {
      ElMessage.error("查询失败，请重试");
    }
  });
};

// 清空模糊搜索的字段
const clear = () => {
  formData.value = {
    subjectName: "", // 题目名称
    subjectDifficult: "", // 题目难度
    subjectType: "", // 题目类型
  };
  init();
};

// 录题
const toUploadSubject = () => {
  const permissionStatus = permissionCheck(["subject:add"]);
  if (permissionStatus) {
    $router.push("/upload-subject");
  } else {
    ElMessage.info("暂无权限");
  }
};

// 当前页数发生改变时触发
const handleCurrentChange = () => {
  init();
};

// 数据展示条数发生改变时触发
const handleSizeChange = () => {
  init();
};

init();
</script>

<style scoped lang="scss">
.subject-management {
  width: 100%;
  height: 100%;
}
</style>